<template>
	<div id="login" @keypress.enter="login">
        <div class="bg-con">
			 <div class="fl imh">
                <img src="../assets/images/login-txt.png" alt="">
			 </div>
			 <div class="fl form">
                <div class="input-group">
                    <el-input
                        v-model="user"
                        placeholder="请输入账户名称"
                        type="text"
                        prefix-icon="el-icon-user-solid"
                    ></el-input>
                    <el-input
                        v-model="password"
                        placeholder="请输入登录密码"
                        type="password"
                        prefix-icon="el-icon-lock"
                    ></el-input>
                    <div class="register" @click="$router.push('register')">
                        注册账号
                    </div>
                </div>
                <div
                    class="login-btn"
                    @click="login"
                >
                    登 录
                </div>
			 </div>
		</div>
	</div>
</template>

<script>
 import { getToken, setToken, getName, setName} from '@/utils/auth'
	export default {
		 data() {
            return {
				user:'',
				password:''
            }
		},
		methods:{
			login(){
				let self = this
				if(self.user == ''){
					 self.$message.warning('请输入账户名称')
					return
                }else if (self.password == '') {

					self.$message.warning('请输入登录密码')
					return
				}
				let formData = new FormData()
				formData.append('username', self.user)
				formData.append('password', self.password)
				console.log(6666666);
				self.$http.post('/login',formData,{
							headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
						}).then((response) => {
                            let res = response.data
                            if (res.code == 200) {
                                //错误提示

                                let roleCode = res.data.role
                                let roles = []
                                roles.push(roleCode)
                                //设置token
                                setToken(roleCode)
                                //vuex提交SET_ROLES角色
								self.$store.commit('SET_ROLES', roles)
								self.$store.commit('SET_NAME', res.data.username)
                                // self.$store.commit('SET_ROLES', roles)
                                let role = getToken() - 0;
                                console.log(role,222);
                                if(role == 2){
                                    self.$router.push({
                                        path:'/LectureList'
                                    })
                                }
                                else{
                                    self.$router.push({
                                        path:'/indexPage'
                                    })
                                }
                            }

                            else{
                                //错误提示
                                self.$message.error(res.message)

                            }
                })
			}
		}
	}
</script>

<style lang="scss">
#login{
    position: absolute;
    width: 100%;
    background-image: url('../assets/images/bg.png') ;
    height: 100%;
    .register{
        text-align: right;
        color:#77aeea;
        cursor: pointer;
    }
    .bg-con{
        width: 900px;
        margin: 0px auto;
        height: 400px;
        top: 50%;
        margin-top: -200px;
        position: relative;
    }
    .imh{
        position: relative;
        width: 500px;
        height:100%;
        background: url('../assets/images/cl.png') no-repeat 0 0;
        overflow: hidden;
        img{
            width:500px;
        }
    }
    .form{
        width: 400px;
        height:100%;
        box-sizing: border-box;
        background: #fff;
        padding: 100px 48px 30px;
    }
    .form .title{
        text-align: center;
        line-height: 110px;
        height: 110px;
        font-weight: 800;
        font-size: 24px;
    }
    .el-input{
        margin-bottom: 22px;
        .el-input__inner{
            border:none;
            border-bottom:1px solid #DCDFE6;
        }
    }
    .el-button.is-round{
        padding: 12px 52px;
        margin-left: 88px;
        margin-top: 10px;
    }
    .input-group{
        margin-bottom: 40px;
    }
    .login-btn{
        height: 50px;
        line-height: 50px;
        background: #4593EA;
        text-align: center;
        cursor: pointer;
        border-radius: 32px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
    }
}
</style>
